<template>
	<view class="container">
		<view class="province-list">
			<view
				v-for="item in provinceList"
				:key="item.name"
				class="province"
				:style="{'background-color': item.name === province ? 'white' : '#F8F8F8'}"
				@click="onChooseProvince(item.name)"
			>
				{{ item.name }}
			</view>
		</view>
		
		<view class="city-list">
			<view
				v-for="item in cityList"
				:key="item"
				class="city"
				hover-class="hover-class"
				@click="onChooseCity(item)"
			>
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	import { provinceList } from '../../dict.js'
	
	export default {
		data () {
			return {
				province: '广东',
				provinceList,
				cityList: []
			}
		},
		
		onLoad () {
			this.getCityList()
		},
		
		methods: {
			getCityList () {
				this.cityList = this.provinceList.find(province => province.name === this.province).citys
			},
			
			onChooseProvince (province) {
				this.province = province
				this.getCityList()
			},
			
			onChooseCity (city) {
				this.$EventBus.$emit('chooseCity', city)
				uni.navigateBack({})
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
	}
	
	.province-list {
		width: 200rpx;
		background-color: #F8F8F8;
	}
	
	.province {
		text-align: center;
		padding: 30rpx 0rpx;
	}
	
	.city-list {
		width: calc(100% - 200rpx);
	}
	
	.city {
		text-align: center;
		padding: 40rpx 0rpx;
	}
	
	.hover-class {
		background-color: #F8F8F8;
	}
</style>
